<template>
  <div class="fencengtu-pic-parent-l">
      <div class="fencengtu-pic-l"
        @click="touchstart"
        :model="layerPic" 
        :style="{
            backgroundImage: 'url(' + layerPic + ')', 
            backgroundSize:'100% 100%',
            backgroundRepeat:'no-repeat'
        }">
        <el-popover
          v-for="(item, index) in alreadyData"
          placement="top-start"
          trigger="hover"
          :title="item.markersName" 
          :key="index">
          <div v-for="i in item.rtObjs" class="text item" :key="i.rtObjName">
            <div v-if = "i.rtTypeId == 1">
               物联设备-{{ i.rtObjName }}
            </div>
            <div v-if = "i.rtTypeId == 2">
               资产-{{ i.rtObjName }} 
            </div>
            <div v-if = "i.rtTypeId == 3">
               视频-{{ i.rtObjName }} 
            </div>
            <div v-if = "i.rtTypeId == 4">
               巡检点位-{{ i.rtObjName }} 
            </div>
          </div>
          <img slot="reference"
            v-if ="item.iconUrl"
            :src="item.iconUrl"
            :style="{
              width:( markerW * zoomPercent ) +'px',
              height:( markerH * zoomPercent ) +'px',
              position:'absolute',
              left:item.xAxis + '%',
              top:item.yAxis + '%',
              cursor:'pointer',
              marginTop:'-' + ( markerW * zoomPercent )/2 + 'px',
              marginLeft:'-' + ( markerW * zoomPercent )/2 + 'px',
              borderRadius:( markerW * zoomPercent )/2 + 'px',
              zIndex:2
            }"/>   
        </el-popover>
        <div v-for="item in alreadyData" :key="item.id + item.xAxis + item.yAxis + 1">
            <img v-if="item.alarmIcon"
                :src="item.alarmIcon"
                :style="{
                  width:( markerAlarmW * zoomPercent ) +'px',
                  height:( markerAlarmH * zoomPercent ) +'px',
                  position:'absolute',
                  left:item.xAxis + '%',
                  top:item.yAxis + '%',
                  cursor:'pointer',
                  marginTop:'-' + ( markerAlarmW * zoomPercent )/2 + 'px',
                  marginLeft:'-' + ( markerAlarmW * zoomPercent )/2 + 'px',
                  borderRadius:( markerAlarmW * zoomPercent )/2 + 'px',
                  zIndex:1
            }"/>
        </div>
      </div>
  </div>
</template>

<script>

import { getPicturesLayeredList,getFbsIconPercent } from '@/api/layeredGraph'

export default {
  name:'LargeLayerContain',
  data () {
    return {
      msg: '分层图全屏',
      zoomPercent:1,
      markerW:32,
      markerH:32,      
      markerAlarmW:40,
      markerAlarmH:40,
      alreadyData:[],
  	}
  },
  props:{
    layerPic:{
      type: String,
      required: true
    },    
    buildId:{
      required: true
    },    
    iconSize:{
      required: true
    },   
    markIcon:{
      required: true
    },
    isFullscreen:{
      required: true
    },
    markCallBack:{
      type: Function,
      required: true
    },
    markData:{
      required: true
    }  
  },
  watch:{
    layerPic(value){
      this.layerPic = value?value:'';
    },
    buildId(value){
      this.buildId = value?value:'';
    },
    isFullscreen(value){
      if(value){
        this.zoomPercent = this.iconSize / 100;
      }
    },
    markData(value){
      if(value){
        this.alreadyData = this.markData;
      }
    }
  },
  created(){
    if(this.isFullscreen){
      this.zoomPercent = this.iconSize / 100;
    }
    if(this.markData){
      this.alreadyData = this.markData;
    }
  },
  methods:{
    touchstart(e){
      let self = this;
      //过滤页面新标注点
      self.alreadyData = self.alreadyData.filter(o => o.id != 0);
      let x = (e.clientX / top.window.screen.width) * 100;
      let y = (e.clientY / top.window.screen.height)  * 100;
      self.alreadyData.push({
          id:0,
          xAxis: x,
          yAxis: y,
          iconUrl:self.markIcon,
          markersName:"新建标注点"
      });
      self.markCallBack(this.alreadyData);
    }
  }
}
</script>

<style lang="less">
.fencengtu-pic-parent-l{
  width: 100%;
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  .fencengtu-pic-l {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
</style>
